<template>
  <div class="choose-area-container">
    <!--<p>福州市</p>-->
    <!--<img src="./../../../images/ic_arrow_down.png" alt="">-->
    <popup-picker :title="cityTitle" @on-hide="hide" @on-change="change" show-name :value.sync='values'
                  :data="dates"></popup-picker>
  </div>
</template>
<script>
  import PopupPicker from './../../../components/popup-picker/index.vue'

  var LocalStorageUtils = require('./../../../commons/js/LocalStorageUtil');
  export default{
    data(){
      return {
        //dates: [['福州市', '厦门市', '深圳市']],
        //values: []
        cityTitle: ""
      }
    },
    components: {
      PopupPicker
    },
    props: {
      dates: [],
      values: [],
    },
    methods: {
      hide(type){
        if (type) {
          var l = this.values[0].length;
          var id = this.values[0].substr(2, l);
          this.$emit("change-city", id);
          this.cityTitle = "";
          console.log(id)
        }

      }
    },
    ready(){
		var user = LocalStorageUtils.getItem("User");
      var city = LocalStorageUtils.getItem("city");       
	 if (city){
        this.cityTitle = city.cityName;
      }else if (user != undefined || user != null) {
        this.cityTitle = user.cityName;
      } else {
        this.cityTitle = "福州市";
      }
      console.log("name:" + this.cityTitle)
    }
  }
</script>
<style lang="less">
  @import './../../../styles/lessBase.less';

  .choose-area-container {
    width: 100%;
    height: 4rem;
    background: #f09601;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: @middleFontSize;
  }

  .choose-area-container img {
    width: 1.5rem;
    height: 1.5rem;
    padding-left: 0.5rem;
  }

  .choose-area-container .weui_cell_ft.with_arrow::after {
    /*display: none;*/
    transform: rotate(135deg);
    border-color: white;
    top: -0.3rem;
  }

  .choose-area-container .vux-popup-picker-value {
    color: white;
    font-size: @middleFontSize;
  }

  .choose-area-container .weui_cell_bd > p {
    color: white;
    font-size: @middleFontSize;
  }

  .choose-area-container .weui_cell {
    padding: 0;
  }
</style>
